<template>
  <view 
    v-if="visible"
    class="modal-overlay"
    :class="{ 'fade-in': visible }"
    @tap="handleOverlayTap"
  >
    <view 
      class="modal-container"
      :class="{ 'slide-up': visible }"
      @tap.stop=""
    >
      <!-- 标题区域 -->
      <view v-if="title || $slots.title" class="modal-header">
        <slot name="title">
          <text class="modal-title">{{ title }}</text>
        </slot>
      </view>
      
      <!-- 内容区域 -->
      <view class="modal-content">
        <slot>
          <text class="modal-message">{{ message }}</text>
        </slot>
      </view>
      
      <!-- 按钮区域 -->
      <view class="modal-footer">
        <slot name="buttons">
          <view class="button-group">
            <button 
              v-if="showCancel"
              class="modal-button cancel-button"
              :style="{ color: cancelColor }"
              @tap="handleCancel"
            >
              {{ cancelText }}
            </button>
            <button 
              class="modal-button confirm-button"
              :style="{ color: confirmColor }"
              @tap="handleConfirm"
            >
              {{ confirmText }}
            </button>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  // 是否显示
  visible: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 消息内容
  message: {
    type: String,
    default: ''
  },
  // 确认按钮文字
  confirmText: {
    type: String,
    default: '确定'
  },
  // 取消按钮文字
  cancelText: {
    type: String,
    default: '取消'
  },
  // 是否显示取消按钮
  showCancel: {
    type: Boolean,
    default: true
  },
  // 确认按钮颜色
  confirmColor: {
    type: String,
    default: '#007aff'
  },
  // 取消按钮颜色
  cancelColor: {
    type: String,
    default: '#666'
  },
  // 点击遮罩层是否关闭
  maskClosable: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['confirm', 'cancel', 'update:visible'])

// 处理确认
const handleConfirm = () => {
  emit('confirm')
  close()
}

// 处理取消
const handleCancel = () => {
  emit('cancel')
  close()
}

// 点击遮罩层
const handleOverlayTap = () => {
  if (props.maskClosable) {
    close()
  }
}

// 关闭弹窗
const close = () => {
  emit('update:visible', false)
}

// 暴露方法给父组件
const show = () => {
  emit('update:visible', true)
}

defineExpose({
  show,
  close
})
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-container {
  width: 540rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal-header {
  padding: 40rpx 40rpx 20rpx;
  text-align: center;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.modal-content {
  padding: 20rpx 40rpx 40rpx;
  text-align: center;
  min-height: 60rpx;
}

.modal-message {
  font-size: 32rpx;
  color: #666;
  line-height: 1.5;
}

.modal-footer {
  border-top: 1rpx solid #eee;
}

.button-group {
  display: flex;
  align-items: center;
}

.modal-button {
  flex: 1;
  padding: 30rpx 0;
  font-size: 34rpx;
  background: transparent;
  border: none;
  border-radius: 0;
  
  &:active {
    background: #f5f5f5;
  }
  
  &:after {
    border: none;
  }
}

.cancel-button {
  border-right: 1rpx solid #eee;
}

.confirm-button {
  font-weight: 500;
}

// 动画效果
.fade-in {
  opacity: 1;
}

.slide-up {
  transform: scale(1);
  opacity: 1;
}

// 自定义插槽样式
:deep(.modal-content .custom-content) {
  text-align: left;
}

:deep(.modal-footer .custom-buttons) {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 40rpx;
}
</style>